
<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree_card">
        <tree-data :tree-data="company" :is-root="isRoot" @showAddDepartsDialog="addDepartments" />
        <!-- 树形组件 -->
        <el-tree :data="departs" :props="defaultProps" default-expand-all>
          <tree-data slot-scope="obj" :tree-data="obj.data" @delDepts="loadDepartments" @showAddDepartsDialog="addDepartments" @showEditDepartsDialog="editDepartments" />
        </el-tree>
        <!-- 添加子部门的对话框组件 -->
        <add-departs ref="addRef" :show-dialog.sync="showDialog" :tree-data="currentTreeData" @cancelDialog="showDialog=false" @updateDeparts="loadDepartments" />
      </el-card>
    </div>
  </div>
</template>

<script>
// 导入树形组件
import TreeData from './components/tree_tools.vue';
// 导入添加部门信息对话框组件
import AddDeparts from './components/add_departs.vue';
// 导入获取公司组织架构的接口方法
import { getDepartments } from '@/api/departments.js';
// 导入转换数组的方法
import { transListToTreeData } from '@/utils/index.js';

export default {
  components: {
    TreeData,
    AddDeparts,
  },
  data() {
    return {
      // departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
      //   { name: '行政部', manager: '刘备' },
      //   { name: '人事部', manager: '孙权' }],
      departs: [],
      defaultProps: {
        label: 'name', // 表示 从这个属性显示内容
      },
      // 定义一个数组，用于传递公司的信息
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' },
      // 定义一个布尔值来判断组件的操作部分是不是需要显示三个下拉菜单
      isRoot: true,
      // 控制添加子部门对话框的显示和隐藏
      showDialog: false,
      // 点击添加子部门的相关信息，这里不要将对象的初始值定义成null，否则会报错
      currentTreeData: {},
    };
  },
  created() {
    this.loadDepartments();
  },
  methods: {
    // 加载部门信息
    async loadDepartments() {
      const result = await getDepartments();
      // console.log(result);
      this.company = { name: result.companyName, manager: '负责人', id: '' };
      this.departs = transListToTreeData(result.depts, '');
    },
    // 添加子部门
    addDepartments(data) {
      this.showDialog = true;
      this.currentTreeData = data;
      // console.log(this.data);
    },
    // 编辑部门
    editDepartments(data) {
      this.showDialog = true;
      this.currentTreeData = data;
      // 通过ref引用到当前的组件实例的方式来调用子组件的方法
      this.$refs.addRef.loadEditDepartmentsDetails(data.id);
      // console.log(this.$refs.addRef);
    },
  },
};
</script>

<style scoped>
.respons {
  font-size:15px;
}
.tree_card {
  padding: 30px 140px;
  font-size: 14px;
}
.tree_control {
  width: 100%;
  height: 40px;
}
</style>
